<template>
  <div>
    <a-card title="广播信息车（车->星->地->星）">
      <a slot="extra" href="#" @click="showModal">详情</a>
      <a-table class="j-table-force-nowrap" :scroll='{x:true}' bordered :columns="columns" size="small" :data-source="data" :pagination="false">
        <a slot="action" slot-scope="text,record">
          <!-- <a @click="showModal">查看</a>
          <a-divider type="vertical" /> -->
            <a-popconfirm title="确定发送吗?" @confirm="() => handleSend(record)">
                    <a >发送</a>
            </a-popconfirm>

        </a>
      </a-table>
    </a-card>
    <a-modal v-model="visible" title="详细信息" @ok="handleOk" width="60%">
      <a-table :columns="columns" :data-source="dataHistory">
      </a-table>
    </a-modal>
  </div>
</template>

<script>
import { getAction,httpAction } from '@/api/manage'
import { mapGetters } from 'vuex'
export default {
  name: "DirectTransmissionParameters",
  data() {
    const columns = [
      {
        title: '指控车',
        dataIndex: 'identificationCode',
        key: 'identificationCode',
        // customRender: (value, row, index) => {
        //   const obj = {
        //     children: value,
        //     attrs: {},
        //   }
        //   obj.attrs.rowSpan = row.commandVehicleNamerowSpan
        //   return obj
        // },
      },
      {
        title: '接收时间',
        dataIndex: 'createTime',
        key: 'createTime',
      },
      {
        title: '广播内容',
        dataIndex: 'broadContent',
        ellipsis: true,
        key: 'broadContent',
      },

      {
        title: '发送时间（地->星）',
        dataIndex: 'sendTime',
        key: 'sendTime',
        customRender: function (t, row) {
          return t ? t + ',' + (row.targetTwoNo ? row.targetTwoNo : '') : ""
        }
      },
      {
        title: '操作',
        key: 'operation',
        // fixed: 'right',
        // width: 100,
        scopedSlots: { customRender: 'action' },
        },
    ];
    const data = [
      // {
      //   key: '0',
      //   commandVehicleName: '指控车1',
      //   identificationCode: '0100',
      //   broadContent: 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa',
      //   sendTime: '2024',
      //   createTime: '2023',
      //   frameId:'123'
      // },
      // {
      //   key: '0-1',
      //   commandVehicleName: '指控车1',
      //   identificationCode: '0101',
      //   verificationResults: '00',
      //   targetNum: '124',
      //   matchingRelationship: '00'
      // },

      // {
      //   key: '1',
      //   commandVehicleName: '指控车2',
      //   identificationCode: '0200',
      //   verificationResults: '01',
      //   targetNum: '124',
      //   matchingRelationship: '01'
      // },
      // {
      //   key: '2',
      //   commandVehicleName: '指控车3',
      //   identificationCode: '0301',
      //   verificationResults: '01',
      //   targetNum: '124',
      //   matchingRelationship: '00'
      // },
      // {
      //   key: '3',
      //   commandVehicleName: '指控车4',
      //   identificationCode: '0401',
      //   verificationResults: '00',
      //   targetNum: '124',
      //   matchingRelationship: '01'
      // },
    ];
    return {
      data,
      columns,
      visible: false,
      dataHistory: [],
      url: {
        list: '/broad/nmcBroadInfo/queryRealTimeList',
        historyList: '/KeyTrackingAreas/historyList',
        resendById:"/frameInfo/nmcFrameInfo/resendById"
      }
    };
  },
  computed: {
    ...mapGetters(['websocketMsg']),
    websocketMsg() {
      return this.$store.state.user.websocketMsg
    },
  },
  watch: {
    websocketMsg: {
      handler(val) {
        // 需要进行的操作
        if(val){
          let msg = JSON.parse(val)
          if (msg.cmd === 'RECEIVE_CONTROL_SATELLITE') {
            this.getList();
          }
        }
      },
    },
  },
  activated() {

    this.getList()
  },
  created() {
    this.getList()

  },
  methods: {
    handleSend(record){
      let data={
        id: record.frameId
      }
      httpAction(this.url.resendById,data,'post').then(res=>{
          if(res.success){
            this.$message.success(res.message)
          }else{
            this.$message.error(res.message)
          }
        })
    },
    changeData(data, field) {
      let count = 0 //重复项的第一项
      let indexCount = 1 //下一项
      while (indexCount < data.length) {
        var item = data.slice(count, count + 1)[0] //获取没有比较的第一个对象
        if (!item[`${field}rowSpan`]) {
          item[`${field}rowSpan`] = 1 //初始化为1
        }
        if (item[field] === data[indexCount][field]) {
          //第一个对象与后面的对象相比，有相同项就累加，并且后面相同项设置为0
          item[`${field}rowSpan`]++
          data[indexCount][`${field}rowSpan`] = 0
        } else {
          count = indexCount
        }
        indexCount++
      }
      return data
    },
    getList() {
      getAction(this.url.list).then(res => {
        if (res.success) {
          this.data = res.result

          // let propsList = ['commandVehicleName']
          // propsList.map((item) => {
          //   this.data = [...this.changeData(this.data, item)]
          // })
        } else {
          this.$message.error(res.message)
        }
      })
    },

    showModal() {
      this.visible = true;
      getAction(this.url.historyList).then(res => {
        if (res.success) {
          this.dataHistory = res.result.records
        } else {
          this.$message.error(res.message)
        }
      })
    },
    handleOk(e) {
      console.log(e);
      this.visible = false;
    },
  }
}
</script>

<style>
</style>